<template>
  <div class="newest-content">
    <div class="tab-bar">
      <span class="item" :class="{ active: type == 0 }" @click="type = 0"
        >全部</span
      >
      <span class="item" :class="{ active: type == 7 }" @click="type = 7"
        >华语</span
      >
      <span class="item" :class="{ active: type == 96 }" @click="type = 96"
        >欧美</span
      >
      <span class="item" :class="{ active: type == 8 }" @click="type = 8"
        >日本</span
      >
      <span class="item" :class="{ active: type == 16 }" @click="type = 16"
        >韩国</span
      >
    </div>
    <!-- 部的table -->
    <table class="el-table playlit-table">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr
          class="el-table__row song-table"
          v-for="(item, index) in tableData"
          :key="item.id"
        >
          <td>{{ index + 1 }}</td>
          <td>
            <div class="img-wrap" @click="playMusic(item.id)">
              <img :src="item.album.picUrl" alt="" />
              <span  class="iconfont icon-play el-icon-video-play" ></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{ item.name }}</span>
                <span v-if="item.mvid != 0" class="iconfont icon-mv el-icon-view" @click='toMV(item.mvid)'></span>
              </div>
              <span>{{ item.subTitle }}</span>
            </div>
          </td>
          <td>{{ item.artists[0].name }}</td>
          <td>
            {{ item.album.name }}
          </td>
          <td>{{ item.duration | formatDuration }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { songs } from '@/api/newest'
import { songUrl, Lyric } from '@/api/home'
import bus from '@/utils/bus'
export default {
  name: 'NewestIndex',
  components: {},
  props: {},
  data () {
    return {
      type: 0,
      tableData: []
    }
  },
  computed: {},
  watch: {
    type () {
      this.getData()
    }
  },
  created () {
    this.getData()
  },
  mounted () {},
  methods: {
    toMV (id) {
      this.$router.push({
        name: 'mv',
        params: {
          id
        }
      })
    },
    async getData () {
      const res1 = await songs(this.type)
      this.tableData = res1.data.data
    },
    async playMusic (id) {
      const res2 = await songUrl(id)
      const lyric = await Lyric(id)
      bus.$emit('songurl', res2.data.data[0].url, lyric.data.lrc.lyric)
    }
  }
}
</script>

<style scoped lang="less">
.newest-content{
  .tab-bar {
    display: flex;
    justify-content: flex-end;
    .item {
      font-size: 15px;
      color: gray;
      margin-right: 20px;
      cursor: pointer;
      &.active {
        color: #dd6d60;
      }
    }
  }
  .song-table {
    .song-wrap {
      > span {
        margin-top: 20px;
        display: inline-block;
        color: #bebebe;
      }
      .icon-mv {
        padding-left: 5px;
        color: #dd6d60;
      }
    }
    .img-wrap {
      position: relative;
      width: 70px;
      height: 70px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 5px;
      }
      .icon-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25px;
        height: 25px;
        color: #dd6d60;
        font-size: 12px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.8);
      }
    }
  }
}
.el-table th, .el-table tr {
  background-color: #e9eef3;
}
.el-table, .el-table__expanded-cell{
  background-color: #e9eef3;
}
</style>
